<template>
  <div>
   <div v-show="isSearch==false"  class="image-header image-nav vflex">
       <router-link to="index"><i class="iconfont icon-xiangzuojiantou"></i></router-link>
       <ul ><li v-for="(item,index) in tabs" :key="item.id" @click="changeIndex(index)"><a :class="{selected:index==currIndex}" :href="item.url">{{item.title}}</a></li></ul>
       <a href="#" @click="ShowSearch()"><i class="iconfont icon-sousuo"></i></a>
    </div>
    <div v-show="isSearch==true" class="image-header image-search vflex">
       <div><i class="iconfont icon-sousuo"></i><input type="search" placeholder="请输入关键词"/></div>
       <a href="#" @click="ShowNav()">取消</a>
    </div>
  </div>
</template>  

<script>
export default {
  data() {   
    return {
      tabs: [
        { title: "套图", url: "#", id: 1 },
        { title: "全景", url: "##", id: 2 },
        { title: "单图", url: "###", id: 3 }
      ],
      currIndex: 1,
      isSearch: false
    };
  },
  methods: {
    changeIndex(index) {
      this.currIndex = index;
    },
    ShowSearch()
    {
      this.isSearch=true;
    },
    ShowNav()
    {
      this.isSearch=false;
    }
  }
};
</script>

